<template>
    <el-container class="grid-view-container">
        <container>
            <HeaderMenu></HeaderMenu>
        </container>
        <container class="grid-container">
            <CanvasGrid />
        </container>
    </el-container>
</template>

<script setup lang="ts">
import CanvasGrid from '@/components/grid/CanvasGrid.vue'
import HeaderMenu from '@/components/grid/HeaderMenu.vue';

</script>

<style scoped>
.grid-view-container{
    display: flex;
    flex-direction: column;
    /* 禁用滚动条 */
    overflow: hidden;
}

.grid-container {
    background-color: #2c313c;
    border: 2px solid #0adbdb;
    flex: 1;
    /* 放大后超出本容器的部分不显示 */
    overflow: hidden;
}

.menu-container {
    border: 2px solid #da0f0f;
}
</style>